import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { Col, Image, message, Row, Tag, Tooltip } from 'ant-design-vue'
import { CaretDownOutlined, EditOutlined } from '@ant-design/icons-vue'

import { CompanyAuditStatusCnEnum, InsurePeriodServeCompanyStatusCnEnum } from '@/const/enum'
import { CompanyAuditStatusColorMap } from '@/const/colorMap'
import { updateAddress } from '@/api/insurance/serveCompany'
import type { InsurePeriodServeCompanyDto } from '@/api/insurance/serveCompany/types'
import type { JSX } from 'vue/jsx-runtime'
import renderModal, { getModelValue, type FormModalDto } from '@/components/modal/Modal'

import RenderDescription, { type DescItemDto } from '@/components/render-descriotion/Index'
import useUserStore from '@/stores/user'
import DialogBlock from './DialogBlock'

interface BasicInfoDto {
    [key: string]: BasicInfoItemDto
}
interface BasicInfoItemDto {
    label: string
    value: string | number | null | undefined
    prefix?: string
    suffix?: string | JSX.Element
}

@Component
export class BasicInfoView extends Render {
    @Prop() serveCompanyInfo!: InsurePeriodServeCompanyDto

    @Emit('refresh')
    handleRefresh() {}

    get descData() {
        return [
            {
                label: '单位地址',
                value: (
                    <div class="flex">
                        <span>{`${this.serveCompanyInfo.province ?? ''}${this.serveCompanyInfo.city ?? ''}${this.serveCompanyInfo.district ?? ''}${this.serveCompanyInfo.address ?? ''}`}</span>
                        <EditOutlined class="cursor-pointer ml-5px" onClick={this.onEditAddress} />
                    </div>
                )
            },
            {
                label: '客户名称',
                value: this.serveCompanyInfo.serveCompanyName
            },
            {
                label: '入库时间',
                value: this.serveCompanyInfo.createTime
            },
            {
                label: '最新申请时间',
                value: this.serveCompanyInfo.lastApplyOccupationTime
            }
        ] as DescItemDto[]
    }

    showDialog = false

    formConfig = this.initFormConfig() as FormModalDto
    initFormConfig() {
        return {
            title: '单位地址',
            width: '500px',
            theme: 'light',
            show: false,
            gutter: 20,
            items: {
                area: {
                    name: '省市区',
                    element: 'areaSelect',
                    required: true
                },
                address: {
                    name: '详细地址',
                    element: 'input',
                    required: true
                }
            },
            complete: async () => {
                const data = getModelValue(this.formConfig)
                const params = {
                    serveCompanyId: this.serveCompanyInfo.serveCompanyId,
                    province: data.area[0],
                    city: data.area[1],
                    district: data.area[2],
                    address: data.address
                }
                await updateAddress(params)
                message.success('操作成功')
                this.handleRefresh()
                this.formConfig.show = false
            },
            cancel: () => {
                this.formConfig.show = false
            }
        } as FormModalDto
    }

    onEditAddress() {
        this.formConfig.show = true
    }

    renderItem(name: string, content: string | null | undefined) {
        return (
            <div>
                <div class="text-sm text-black-300 mb-10px">{name}</div>
                <div>{content ?? '--'}</div>
            </div>
        )
    }

    render() {
        return (
            <>
                <div class="pt-20px px-24px rounded-sm">
                    <div class="flex items-center w-full mb-20px">
                        <div class="flex-1">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="text-18px font-bold mr-16px">
                                        {this.serveCompanyInfo.companyName}
                                    </div>
                                    <Tag
                                        color={
                                            CompanyAuditStatusColorMap[
                                                this.serveCompanyInfo
                                                    .status as keyof typeof CompanyAuditStatusColorMap
                                            ]
                                        }
                                    >
                                        {InsurePeriodServeCompanyStatusCnEnum[this.serveCompanyInfo.status]}
                                    </Tag>
                                </div>
                                <div class="flex items-center">
                                    <Tooltip
                                        placement="bottom"
                                        v-slots={{
                                            default: () => {
                                                return (
                                                    <div class="flex px-5px py-1px rounded-sm border border-solid border-border-color-100 items-center text-black-300 cursor-pointer">
                                                        <span class="mr-5px">更多设置</span>
                                                        <CaretDownOutlined />
                                                    </div>
                                                )
                                            },
                                            title: () => {
                                                return (
                                                    <div class="leading-loose p-5px text-center">
                                                        {useUserStore().hasPermission(
                                                            'client:dispatching-company:block'
                                                        ) && (
                                                            <div
                                                                class="cursor-pointer"
                                                                onClick={() =>
                                                                    (this.showDialog = true)
                                                                }
                                                            >
                                                                拉黑
                                                            </div>
                                                        )}
                                                    </div>
                                                )
                                            }
                                        }}
                                    ></Tooltip>
                                    {/* <Button class="ml-12px" type="primary" size="small" onClick={() => this.$router.go(-1)}>
                                        返回
                                    </Button> */}
                                </div>
                            </div>
                            <div class="text-base text-black-300 mt-8px">
                                Id：{this.serveCompanyInfo.companyId}
                            </div>
                        </div>
                    </div>
                    <RenderDescription row={2} renderData={this.descData} />
                    {/* <div class="mt-20px pt-20px border-t-1 border-t-solid border-t-border-color-100">
                        <Row>
                            {Object.values(this.basicInfo).map((i) => {
                                return (
                                    <Col sm={24} md={6}>
                                        <div>
                                            <div class="flex text-black-300">
                                                <span>{i.label}</span>
                                            </div>
                                            <div class="mt-12px flex items-center">
                                                {i.value || i.value === 0 ? (
                                                    <div class="mr-5px">
                                                        {i.prefix}
                                                        {i.value}
                                                    </div>
                                                ) : (
                                                    <span>--</span>
                                                )}
                                                {i.suffix}
                                            </div>
                                        </div>
                                    </Col>
                                )
                            })}
                        </Row>
                    </div> */}
                </div>
                {renderModal(this.formConfig)}
                <DialogBlock
                    v-model:show={this.showDialog}
                    serveCompanyId={this.serveCompanyInfo.serveCompanyId}
                    onRefresh={this.handleRefresh}
                />
            </>
        )
    }
}

export default toNative<
    { serveCompanyInfo: InsurePeriodServeCompanyDto },
    {
        refresh: () => void
            }
            >(BasicInfoView)
